<template>
	<view class="content">
		<view class="group">
			<image :src="group.backgroundUrl" mode="aspectFill"></image>
		</view>
		
		<view class="goods-list">
			<view class="header">
				<image :src="group.iconUrl" mode="aspectFill"></image><text>{{group.groupName}}</text>
			</view>
			<view 
				v-for="(item, index) in groupBuyProducts" :key="index"
				class="goods-item"
			>
				<view class="image-wrapper" @click="navToDetailPage(item)">
					<image v-if="item.productDTO.productMainImage" :src="item.productDTO.productMainImage.url" mode="aspectFill"></image>
				</view>
				<view class="l1">
					<view class="title clamp">{{item.productDTO.productName}}</view>
					<uni-countdown class="countdown" :day="item.groupBuyCountDown.days" :hour="item.groupBuyCountDown.hours" :minute="item.groupBuyCountDown.minutes"
					 :second="item.groupBuyCountDown.seconds" color="#FFFFFF" background-color="#333333" />
				</view>
				<view class="price-box">
					<text class="price">{{item.productDTO.unitPrice}}</text>
					<text>已售{{item.soldUnit}}件 / 仅剩{{item.productDTO.totalUnit}}件</text>
					<text v-if="item.status=='1'" class="action" @click="navToDetailPage(item)">立即抢购</text>
					<text v-if="item.status=='2'" class="end">即将开始</text>
					<text v-if="item.status=='3'" class="end">已结束</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
	export default {
		components: {
			uniLoadMore	,
			uniCountdown
		},
		data() {
			return {
				groupId:''	,//商品组ID
				group:{},
				groupBuyProducts:[]
			};
		},
		
		onLoad(options){
			this.groupId = options.groupId;
			this.inquiryGroup();
		},
		methods: {
			//搜索商品
			inquiryGroup(){
				let that = this;
				let postData = {
					groupUuid: this.groupId
				};
				//加载中
				this.$api.request.productGroup(postData, res => {
					this.group = res.body.data;
					let groupBuyList = this.group.groupBuyProductList;
					let groupBuyProducts = [];
					groupBuyList.forEach(function(val,index){
						var startTime = val.startTime;
						var endTime = val.endTime;
						var currDate = new Date();
						var diff = [];
						//团购中
						if(currDate>=new Date(startTime.replace(/-/g,"/")) && currDate<=new Date(endTime.replace(/-/g,"/"))){
							diff = that.$api.util.getCountDownTimes(endTime);
							val.status = '1';
						}
						//未开始
						if(currDate<new Date(startTime.replace(/-/g,"/"))){
							diff = that.$api.util.getCountDownTimes(startTime);
							val.status = '2';
						}
						//已结束
						if(currDate>new Date(endTime.replace(/-/g,"/"))){
							diff = that.$api.util.getCountDownTimes(endTime);
							val.status = '3';
						}
						var groupBuyCountDown = {
							days: diff[0],
							hours: diff[1],
							minutes: diff[2],
							seconds: diff[3]
						}
						val.groupBuyCountDown = groupBuyCountDown;
						groupBuyProducts.push(val);
					})
					this.groupBuyProducts = groupBuyProducts;
				},false);
			},
			//详情
			navToDetailPage(item){
				let id = item.groupBuyProductUuid;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			}
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: $page-color-base;
	}

	.group{
		height: 240px;
		image{
			width: 100%;
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #888;
				&.active{
					color: $base-color;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	/* 商品列表 */
	.goods-list{
		position: absolute;
		top:200px;
		left:0;
		right:0;
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: linear-gradient(to bottom, #ffffff 0%,#f8f8f8 100%);
		border-radius: 20upx;
		.header{
			width: 100%;
			text-align: center;
			padding: 20upx 0;
			font-size: $font-lg;
			font-color: $font-color-dark;
			image{
				vertical-align: middle;
				height: 60upx;
				width:60upx;
			}
			text{
				padding-left:10upx
			}
		}
		.goods-item{
			display:flex;
			flex-direction: column;
			width: 100%;
			padding: 20upx;
			background-color: #fff;
			margin: 10upx 0;
			border-radius: 20upx;
			.l1{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}
		.image-wrapper{
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title{
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10upx 10upx 10upx 0;
			font-size: 24upx;
			color: $font-color-light;
			.action{
				background-color: $base-color;
				border-radius: 10upx;
				box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
				color: #fff;
				padding: 10upx;
				font-size: $font-base;
			}
			.end{
				background-color: #D6D6D6;
				border-radius: 10upx;
				color: #fff;
				padding: 10upx;
				font-size: $font-base;
			}
		}
		.price{
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
			&:before{
				content: '￥';
				font-size: 26upx;
			}
		}
	}
	

</style>
